<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增节点</title>
</head>
<body>

<div id="container" >
    <ul id="list">
        <li>大一</li>
        <li id="er">大二</li>
        <li>大三</li>
        <li>大四</li>
        <li>大五</li>
    </ul>
</div>
<button type="button" onclick="addElement()">点击我，进行增加</button>
<script type="text/javascript">

    function addElement(){
        // 1、创建一个新元素
        let li = document.createElement("li") ;
        console.log( li ) ;
        li.style.backgroundColor = 'red' ;
        li.innerHTML = "我是新添加的元素" ;
        console.log( li  ) ;
        // 2、复制一个元素
        let source = document.querySelector("#list") ;
        let target = source.cloneNode( true ) ;
        console.log( target ) ;

        // 3、添加到哪里去
        let ul = document.querySelector("#list") ;
        ul.appendChild( li ) ;

        // element.insertBefore( 新建的元素 , 引用元素 )
        // let refElement = document.querySelector("#er") ;
        // ul.insertBefore( li , refElement ) ;  //添加到refElement的前面
    }
</script>
</body>
</html>